<!doctype html>
<html lang="zh-CN">
  <head>

    <title>列字段比较</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">

    <link rel="stylesheet" href="../../css/font-awesome.min.css" />
    <link rel="stylesheet" href="../../css/fa-font-awesome.min.css" />
    <link rel="stylesheet" href="../../css/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/animate.min.css" />
    <link rel="stylesheet" href="../../css/appbase.css" />
    <link rel="stylesheet" href="../../css/style.css" />
    <link rel="stylesheet" href="../../plugins/icheck/custom.css" />
    <link rel="stylesheet" href="column.css" >
  </head> 
  <body>
    <div class="container-fluid">
      <div class="row " >
        <div class="col-xs-3">
          <!-- 左边列 -->
          <dl>
            <dt>左边列</dt>
            <dd class="left-column">
              <textarea id="leftColumns" placeholder="左边列" ></textarea>
            </dd>
          </dl>   
        </div>
        
        <div class="col-xs-3">
          <!-- 右边列 -->
          <dl>
            <dt>右边列</dt>
            <dd class="right-column">
              <textarea  id="rightColumns" placeholder="右边列" ></textarea>
            </dd>
          </dl>
        </div>
        <div class="col-xs-3">
          <!-- 忽略列 -->
          <dl>
            <dt>需要忽略的列</dt>
            <dd class="ignore-column">
              <textarea  id="ignoreColumns" placeholder="忽略的列" ></textarea>
            </dd>
          </dl>
        </div>
        <div class="col-xs-3">
          <dl>
            <dt>比较列设置</dt>
            <dd>
              <!-- 列设置 -->
              <ul class="colset clearfix" id="colset">
                <li ><button class="btn btn-white" ><input type="checkbox" name="ignoreAa"  />忽略大小写</button></li>
                <li ><button class="btn btn-white" ><input type="checkbox" name="ignoreBlank" checked="checked" />忽略两边空白</button></li>
                <li ><button class="btn btn-white" ><input type="checkbox" name="ignore_"  />忽略下划线</button></li>
              </ul>
            </dd>
          </dl>
          <dl>
          	<dt>功能列设置</dt>
          	<dd>
            	<ul class="colset clearfix" id="funBtns" >
            		<li ><button class="btn btn-white" ><input type="checkbox" checked="checked"  name="erasureBlank"  />去除两边空白</button></li>
            		<li ><button class="btn btn-white" ><input type="checkbox" checked="checked"  name="erasureRepeat"  />去除重复数据</button></li>
            		<li ><button class="btn btn-white" ><input type="checkbox"  name="sort"  />排序</button></li>
            	</ul>
            </dd>
          </dl>
          <dl>
            <dt>列数查看</dt>
            <dd>
               <ul class="col-count-see">
                <li><span>左边列数:</span><b id="leftCount">0</b></li>
                <li><span>右边列数:</span><b id="rightCount">0</b></li>
                <li><span>左边&gt;右边列数:</span><b id="leftMutiRightCount">0</b></li>
                <li><span>左边&lt;右边列数:</span><b  id="rightMutiLeftCount">0</b></li>
                <li><span>相等列数:</span><b id="equalCount">0</b  ></li>
                <li id="funCount"><span>功能列数:</span><b  >0</b>&nbsp; 处理后：<b>0</b>&nbsp; 相差:<b>0</b></li>
              </ul>
            </dd>
          </dl>
        </div>        
      </div>
      <div class="row">
         <!-- 左边比右边多出列-->
         <div class="col-xs-3">
            <dl>
              <dt>左边比右边多出列&nbsp;<button class="btn btn-primary copy" id="copyLeftMuti" key="leftMuti" >复制结果</button>
              </dt>
              <dd id="leftMuti" class="left-muti"></dd>
            </dl>
         </div>
         <!-- 右边比左边多出列 -->
         <div class="col-xs-3">
            <dl>
              <dt>右边比左边多出列&nbsp;<button class="btn btn-primary copy" id="copyRightMuti" key="rightMuti" >复制结果</button></dt>
              <dd id="rightMuti" class="right-muti"></dd>
            </dl>
         </div>
         <!-- 相等的列 -->
         <div class="col-xs-3">
            <dl>
              <dt>相等的列&nbsp;<button class="btn btn-primary copy" id="copyEqual" key="equal">复制结果</button></dt>
              <dd id="equalColumns" class="equal-column"></dd>
            </dl>
         </div>
         <div class="col-xs-3">
         	<dl>
         		<dt>去重&排序&去空格&去空行&nbsp;<button class="btn btn-primary copy" id="copyFunResult" key="fun">复制结果</button></dt>
         		<dd class="fun_column">
         			<textarea placeholder="将数据放入此区域，使用上面功能进行操作,重复列会写入相等列中" id="funColumns" ></textarea>
         		</dd>
         	</dl>
         </div>
      </div>
    </div>
    <script type="text/javascript" src="../../js/requirejs2.1.11-min.js"></script>
    <script type="text/javascript" src="../config.js"></script>
    <script type="text/javascript">
    	require(['jquery','tools/compare']);
    </script>
  </body>
</html>